<template>
  <div class="global-monitoring">
    <el-row>
      <el-col :span="8" v-for="(item, index) in 3">
        <div class="item">
          <div class="name">
            {{
              index == 0
                ? "路灯照明"
                : index == 1
                ? "大厅照明"
                : index == 2
                ? "景观灯"
                : ""
            }}
          </div>
          <ul class="ul">
            <li>
              <div class="name">设备数量</div>
              <div class="val">100</div>
            </li>
            <li>
              <div class="name">在线数量</div>
              <div class="val">20</div>
            </li>
            <li>
              <div class="name">离线数量</div>
              <div class="val">0</div>
            </li>
            <li>
              <div class="name">开启数量</div>
              <div class="val">10</div>
            </li>
            <li>
              <div class="name">关闭数量</div>
              <div class="val">80</div>
            </li>
            <li>
              <div class="name">故障报警</div>
              <div class="val">0</div>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8" v-for="item,index in 2">
        <div class="item">
          <div class="name">{{index==0?'房间照明':index==1?'大厅照明':''}}</div>
          <ul class="ul">
            <li>
              <div class="name">设备数量</div>
              <div class="val">100</div>
            </li>
            <li>
              <div class="name">在线数量</div>
              <div class="val">20</div>
            </li>
            <li>
              <div class="name">离线数量</div>
              <div class="val">0</div>
            </li>
            <li>
              <div class="name">开启数量</div>
              <div class="val">10</div>
            </li>
            <li>
              <div class="name">关闭数量</div>
              <div class="val">80</div>
            </li>
            <li>
              <div class="name">故障报警</div>
              <div class="val">0</div>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup></script>
<style lang="scss" scoped>
.global-monitoring {
  width: 100%;
  height: 100%;
  padding-top: 34px;
  .item {
    width: 541px;
    height: 306px;
    background: url("../images/item-bgc.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 28px;
    .name {
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 22px;
      color: #ffffff;
    }
    .ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      padding: 20px 30px 30px 30px;
      li:nth-of-type(4) {
        .val {
          color: #61c8ff;
        }
      }
      li:nth-of-type(5) {
        .val {
          color: #db0638;
        }
      }
      li:nth-of-type(6) {
        .val {
          color: #ffda1c;
        }
      }
      li {
        width: 160px;
        margin-top: 26px;
        .name {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 20px;
          color: #ffffff;
          text-align: center;
        }
        .val {
          font-family: Source Han Sans CN;
          font-weight: bold;
          font-size: 24px;
          margin-top: 13px;
          color: #ffffff;
          text-align: center;
        }
      }
    }
    .icon-bgc {
      /* background: url("../images/warning-icon.png") no-repeat; */
      background: url("../images/normal-icon.png") no-repeat;
      background-size: 100% 100%;
      width: 161px;
      height: 155px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 40px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 24px;
      color: #ffffff;
      padding-right: 10px;
      padding-top: 10px;
    }
  }
}
</style>
